<template>
<div class="box p-t-10 p-l-25 p-r-25 p-b-15 flex flex-column background-white radius-8">
  <div class="flex justify-between align-center font-14 font-medium text-color3">
    <div class="header-row flex align-center">
      <svg-icon class="icon-13" :icon-class="icon" />
      <span class="text-color4 m-l-5">{{ cardType }}</span>
    </div>
    <span>{{ $t('Common.detail')}}</span>
  </div>
  <div class="flex-1 p-relative" >
    <div class="h-100 w-100" :id="chartId">

    </div>
    <div class="p-absolute font-medium center-label" :class="{'waterliquid': chartType === 'liquidFill'}">
      <p class="font-14 font-bold">{{ chartLabel.label }}</p>
      <p class="font-25 p-t-5 text-color6" v-if="chartType === 'pie'">{{ chartLabel.value }}</p>
    </div>
  </div>
  <div class="footer ">
    <div class="flex justify-between align-center">
      <div class="flex-1 border-gray item left-footer">
        <text-with-value
            :data="footer.left"
        />
      </div>
      <div class="flex-1 right-footer item border-gray border-left-none">
        <text-with-value
            :data="footer.right"
        />
      </div>
    </div>
  </div>
</div>
</template>

<script>
import TextWithValue from '../TextWithValue'
import * as echarts from 'echarts/core'
import 'echarts-liquidfill'
import { PieChart } from 'echarts/charts'
import {
    DatasetComponent,
    GridComponent,
    LegendComponent,
    TitleComponent,
    TooltipComponent,
    TransformComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { getPercent } from '../../utils/formatter'

export default {
    name: 'PieChart',
    components: {
        TextWithValue
    },
    props: {
        chartData: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        footer () {
            return {
                left: {
                    label: this.$t(this.langType + '.' + this.chartData.label.left.label[0]),
                    value: this.chartData.label.left.value + this.hasUnit
                },
                right: {
                    label: this.$t(this.langType + '.' + this.chartData.label.right.label[0]),
                    value: this.chartData.label.right.value + this.hasUnit
                }
            }
        },
        icon () {
            return this.chartData.type
        },
        langType () {
            return this.chartData.langType
        },
        cardType () {
            return this.$t(this.langType + '.' + this.chartData.text[0])
        },
        title () {
            return this.chartData.text.reduce((all, item) => {
                const str = this.langType + '.' + item
                all += this.$t(str)
                return all
            }, '')
        },
        chartId () {
            return `pie-${this.chartData.id}`
        },
        hasUnit () {
            return this.chartData.label.unit || ''
        },
        chartLabel () {
            const { left, right } = this.chartData.label
            return {
                label: this.title,
                value: left.value + right.value
            }
        },
        chartType () {
            return this.chartData.chartType
        }
    },
    created () {
        echarts.use([
            LegendComponent,
            TitleComponent,
            TooltipComponent,
            GridComponent,
            DatasetComponent,
            TransformComponent,
            PieChart,
            LabelLayout,
            UniversalTransition,
            CanvasRenderer
        ])
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            const chartDom = document.getElementById(this.chartId)
            const myChart = echarts.init(chartDom)
            const { left, right } = this.chartData.label
            const data = [
                {
                    value: left.value,
                    name: this.$t(this.langType + '.' + left.label),
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#64C4FB' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#3491F4' // 100% 处的颜色
                            }]
                        }
                    }
                },
                {
                    value: right.value,
                    name: this.$t(this.langType + '.' + right.label)

                }
            ]
            const option = this.chartType === 'pie' ? {
                tooltip: {
                    trigger: 'item'
                },
                color: ['#BFDBFA'],
                series: [
                    {
                        name: this.title,
                        type: this.chartType,
                        radius: ['60%', '80%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            fontFamily: 'SourceHanSansCN-Medium',
                            fontSize: 14,
                            padding: [0, 0, 10, 0],
                            formatter: (params) => {
                                const { seriesName } = params
                                return `${seriesName}`
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data
                    }
                ]
            }
                : {
                    series: [
                        {
                            type: 'liquidFill',
                            name: this.title,
                            data: [this.chartData.value],
                            radius: '80%',
                            itemStyle: {
                                color: this.chartData.value > 0.5 ? '#F9CC1B' : '#f00'
                            },
                            label: {
                                show: true,
                                fontSize: 26,
                                color: '#000',
                                fontWeight: 400,
                                position: ['50%', '60%'],
                                align: 'center',
                                formatter: params => {
                                    const { value } = params
                                    const percent = getPercent(value)
                                    console.log(params, 'params', value)
                                    return `${percent}`
                                }
                            },
                            outline: {
                                borderDistance: 3,
                                itemStyle: {
                                    borderWidth: 4,
                                    borderColor: this.chartData.value > 0.5 ? '#F9CC1B' : '#f00'
                                }
                            }
                        }
                    ]
                }
            option && myChart.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
  width: 20.57vw;
  height: 14.1vw;
  .header-row{
    height: 1.56vw;
    line-height: 1.56vw;
  }
  .footer{
    height: 1.82vw;
    line-height: 1.82vw;
    border-radius: 15px;
    .left-footer {
      border-radius: 15px 0 0 15px;
    }
    .right-footer{
      border-radius: 0 15px 15px 0;
    }
  }
  .center-label {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .waterliquid{
    top: 40%;
  }
}
</style>
